<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('添加知识库类别')"/>
    </head>
    <style>
        .commonTag {
            margin: 5px;
            cursor: pointer;
        }
        .tag-card {
            background-color: rgba(243, 243, 243, 0.98);
            border-radius: 5px;
            height: 150px;
        }
        .tag-error {
            background-color: #fbe2e2;
            border-color: #c66161;
            color: #c00;
        }
    </style>
    <body class="white-bg">
        <div class="wrapper wrapper-content animated fadeInRight ibox-content">
            <form class="form-horizontal m" id="form-wfTag-add">
                <input type="hidden" name="recordId" th:value="${recordId}">
                <input type="hidden" name="type" th:value="${type}">
                <input type="hidden" name="tagPkid">
                <div class="form-group">
                    <label class="col-sm-3 control-label "><span style="color: dodgerblue;" title="此工单已有标签">此工单标签&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br><span style="color: red;">（双击取消标签）</span></span></label>
                    <div class="col-sm-8">
                        <div class="card card-body tag-card" id="showTagCard">
                            <th:block th:if="${wfTag} != null" th:each="item : ${wfTag}">
                                <span class="badge badge-pill badge-success commonTag" ondblclick="dbClickCancelExist(this)" th:value="${item['tagNo']}">[[${item['tagName']}]]</span>
                            </th:block>
                        </div>
                    </div>
                </div>
                <div class="form-group" style="margin-top: 10px;">
                    <label class="col-sm-3 control-label is-required">请输入标签名称：<br><sapn style="color: red">（按Enter键确认）</sapn></label>
                    <div class="col-sm-8">
                        <input type="text" placeholder="请输入标签名......" class="form-control" name="tagName"  id="tag_name" autocomplete="off"/>
                        <label class="error" style="margin: 3px 10px 0 0 ;display: none;" id="tag-error">
                            <i class="fa fa-times-circle">请按Enter键确认后再提交</i>
                        </label>
                        <label class="error" style="margin: 3px 10px 0 0 ;display: none;" id="tag-null">
                            <i class="fa fa-times-circle">请先添加一个标签</i>
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">常用标签&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br><span style="color: red;">（双击快速选择）</span>：</label>
                    <div class="col-sm-8">
                        <div style="margin: 5px 0 20px 0;">
                            <th:block th:if="${commonTag} != null" th:each="item : ${commonTag}">
                                <span class="badge badge-info commonTag" th:value="${item['tagNo']}" ondblclick="dbClickAdd(this)">[[${item['tagName']}]]</span>
                            </th:block>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: bootstrap-typeahead-js" />
        <script>
            var prefix = ctx + "system/tag";
            //备份
            var oldTags = [];
            var oldTagSize = 0;

            $(function () {
                let tagValue = $("#showTagCard").find("span");
                oldTagSize = tagValue.length;
                for (let i = 0; i < tagValue.length; i++) {
                    oldTags.push(tagValue[i].innerHTML)
                }
            })

            function submitHandler() {
                let inputVal = $("#tag_name").val();
                if(inputVal != null && inputVal !== ""){
                    $("#tag-null").hide();
                    $("#tag-error").show();
                    $("#tag_name").addClass('tag-error');
                    return false;
                }
                let tagValue = $("#showTagCard").find("span");
                let tags = new Array();
                let flag = true;
                for (let i = 0; i < tagValue.length; i++) {
                    if(oldTags.length !== 0){
                        for (let j = 0; j < oldTags.length; j++) {
                            flag = true;
                            if(tagValue[i].innerHTML === oldTags[j]) {
                                flag = false;
                                break;
                            }
                        }
                    }
                    if(flag){
                        tags.push({
                            'tagNo': tagValue[i].getAttribute("value"),
                            'tagName': tagValue[i].innerHTML
                        })
                    }
                }
                let data = $('#form-wfTag-add').serializeArray();
                data.push({name:"tags",value: JSON.stringify(tags)})
                if (tags.length > 0) { //删除原来的，在添加原来的不会执行更新
                    $.operate.save(prefix + "/saveWFTag", data, callback);
                }else if(oldTags.length < oldTagSize) {
                    $.modal.close()
                }else {
                    $("#tag-null").show();
                    $("#tag_name").addClass('tag-error');
                    return false;
                }
            }

            function callback(res) {
                if(res.code === 0){
                    $.modal.msgSuccess(res.msg)
                    refresh()
                    $.modal.close()
                }
            }

            //刷新父级页面
            function refresh(){
                let topPage = parent.length-2
                parent.window[topPage].document.location.reload()
            }


            //获得焦点
            $("#tag_name").focus(function () {
                $("#tag-null").hide();
                $("#tag-error").hide();
                $("#tag_name").removeClass('tag-error');
            })

            //模糊匹配数据
            $.get(prefix + "/autoComplete", function(data){
                $("#tag_name").typeahead({
                    source: data.value,
                    autoSelect: false
                });
            },'json');

            //双击选择常用标签
            function dbClickAdd(e){
                let data = e.innerHTML.toString();
                let value = $(e).attr("value");
                let tagValue = $("#showTagCard").find("span");
                let flag = true;
                if(tagValue.length !== 0 ){
                    for (let i = 0; i < tagValue.length; i++) {
                        if(data === tagValue[i].innerHTML){
                            flag = false;
                            $.modal.msgWarning("标签："+data+"&nbsp;&nbsp;已存在")
                            break
                        }
                    }
                    if(flag){
                        $("#showTagCard").append("<span class='badge badge-pill badge-light commonTag' value="+value+" ondblclick='dbClickCancel(this)'>"+data+"</span>")
                    }
                }else{
                    $("#showTagCard").append("<span class='badge badge-pill badge-light commonTag' value="+value+" ondblclick='dbClickCancel(this)'>"+data+"</span>")
                }
            }

            //删除存在的标签
            function dbClickCancelExist(e){
                let tagNo = $(e).attr("value");
                let tagName = e.innerHTML.toString();
                $.modal.confirm("确认要删除<span style='color: #1E90FFFF;'>‘"+tagName+"’</span>标签吗?", function() {
                    let data = $('#form-wfTag-add').serializeArray();
                    for (let i = 0; i < data.length; i++) {
                        if(data[i].name === 'tagPkid'){
                            data[i].value = tagNo
                        }else if(data[i].name === 'tagName'){
                            data[i].value = tagName
                        }
                    }
                    $.post(prefix + "/deleteWFTag",data,function (res) {
                        if(res.code === 0){
                            for (let i = 0; i < oldTags.length; i++) {
                                if(oldTags[i] === tagName){
                                    oldTags.splice(i,1)
                                }
                            }
                            e.remove();
                            refresh();
                        }else{
                            $.modal.msgError(res.msg)
                        }
                    },"json")
                });
            }

            //双击取消
            function dbClickCancel(e){
                e.remove();
            }

            //回车确定
            $("#tag_name").bind("keypress",function (event){
                if(event.keyCode !== 13){
                    return
                }
                let data = $("#tag_name").val()
                let value = "-1"
                let tagValue = $("#showTagCard").find("span");
                let flag = true;
                if(tagValue.length !== 0 ){
                    for (let i = 0; i < tagValue.length; i++) {
                        if(data === tagValue[i].innerHTML){
                            flag = false;
                            $.modal.msgWarning("标签："+data+"&nbsp;&nbsp;已存在")
                            break
                        }
                    }
                    if(flag && event.keyCode === 13){
                        $("#showTagCard").append("<span class='badge badge-pill badge-light commonTag' value="+value+" ondblclick='dbClickCancel(this)'>"+data+"</span>")
                    }
                }else if(event.keyCode === 13){
                    $("#showTagCard").append("<span class='badge badge-pill badge-light commonTag' value="+value+" ondblclick='dbClickCancel(this)'>"+data+"</span>")
                }
                $("#tag_name").val("")
            })
        </script>
    </body>
</html>
